<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <!--    <link rel="stylesheet" href="../../style/shoppingCart.css"/>-->
    <link rel="stylesheet" href="../../style/address.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        .el-button--primary {
            width: 80px !important;
            color: #fcfbfa;
            background-color: #409EFF;
            border-color: #409EFF;
        }

        .el-header {
            padding: 0 !important;
            background-color: white;
            color: #333;
            text-align: center;
            height: 140px !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div style="background-color: rgb(245,245,245) ;
            width: 100%;display: flex;justify-content: space-around">
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal">
                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>
                            <el-submenu v-show="!showUser" index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;"
                                       href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    :src="getImage(user.avatar)"
                                                    :preview-src-list="[ `/common/download?name=${user.avatar}` ]">
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png"
                                                         style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                        >

                            <el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;width:100%;background: white;">
                    <div style=" display: flex;align-items: center;justify-content: space-between;
                    width: 1150px;height: 90px;">
                        <div style="display: flex;align-items: center;">
                            <h1 class="Mytao">
                                <a href="user.html">我的淘淘</a></h1>
                            <div style="margin-left: 50px">
                                <el-menu id="menu" style="" class="el-menu-demo" mode="horizontal">
                                    <el-menu-item index="1"><a style="color: rgba(0,0,0,0.85);font-size: 20px;font-weight: bold" class="menu" href="user.html">首页</a></el-menu-item>
                                    <el-submenu index="2">
                                        <template slot="title"><b class="menu">账号设置</b></template>
                                        <el-menu-item index="2-1"><a style="" class="menu" href="address.html">收货地址</a>
                                        </el-menu-item>
                                        <el-menu-item index="2-2"><a class="menu" href="userInfo.html">修改资料</a>
                                        </el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </div>


                        </div>

                    </div>
                </div>
            </div>

        </el-header>
        <el-main class="main"
                 style="background-color: white;display: flex;justify-content: center;overflow-y: inherit">
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div style="background-color: white;
                width: 1150px;padding: 15px;height: 100%;">
                    <div class="divContainer">
                        <div class="left">
                            <ul>
                                <li><h3 style="color: rgb(216,30,6)">全部功能</h3></li>
                                <li><a href="shoppingCart.html" target="_blank">我的购物车</a></li>
                                <li><a href="collect.html" target="_blank">我的收藏</a></li>
                                <li><a href="" target="_blank">我买到的宝贝</a></li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/frontInterceptors.js"></script>
<script src="../../js/validateAddress.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                tableData: [{
                    consignee: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    phone: '12346789',
                    label: '家',
                    detail: '12345',
                    idDefault: 1,
                    postcode: '123456',
                    sex:'先生'
                }],
                province: [],
                ruleForm: {
                    label: '',
                    consignee: '',
                    sex: '',
                    phone: '',
                    detail: '',
                    address: '',
                    is_default: false,

                },
                form: {
                    address: [],
                    number: 0,
                },
                user: {},
                showUser: true,
            }
        },
        computed: {
            rules() {
                return {
                    //账号
                    detail: [{required: true, 'validator': checkDetailAddress, trigger: 'blur'}],
                    address: [{required: true, 'validator': checkAddress, trigger: 'blur'}],
                    consignee: [{required: true, 'validator': checkName, trigger: 'blur'}],
                    phone: [{required: true, 'validator': checkPhone, trigger: 'blur'}],
                }
            }

        },
        watch: {},
        created() {
            this.getProvince()
            this.selectAddress()

        },
        methods: {
            async selectAddress(){
                const {data:res} = await axios.get("/addressBook/list")
                console.log(res.data)
                if(res.code === 1){
                    res.data.forEach(item =>{
                        item.consignee = item.consignee + (res.data.sex === 1 ? '先生' : '女士')
                        item.address = item.provinceName +'/'+item.cityName+'/' + item.districtName
                    })

                    this.tableData =  res.data

                }else {
                    this.$message({
                        message: '地址查询失败',
                        type: 'error'
                    })
                }
            },

            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            async save() {
                let params = {
                    consignee: this.ruleForm.consignee,
                    sex: this.ruleForm.sex === '女士' ? 0 : 1,
                    phone: this.ruleForm.phone,
                    provinceCode: this.ruleForm.address[0],
                    cityCode: this.ruleForm.address[1],
                    districtCode: this.ruleForm.address[2],
                    detail: this.ruleForm.detail,
                    label: this.ruleForm.label,
                    isDefault: this.ruleForm.is_default ? 1 : 0
                }
                const {data: res} = await axios.post('/addressBook', params)
                if (res.code === 1) {
                    this.$message({
                        message: res.data,
                        type: 'success'
                    })
                    this.selectAddress()
                } else {
                    this.$message({
                        message: '地址保存失败',
                        type: 'error'
                    })
                }
            },
            async getProvince() {
                const {data: res} = await axios.get(`/district/list/${86}`)
                this.province = res.data
                console.log(this.value)
            },

            handleChange(value) {
                console.log(value);
                // console.log(this.province);
            },
            async logout() {
                const {data: res} = await axios.post('/user/logout')
                if (res.code === 1) {
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },

            getImage(image) {
                return `/common/download?name=${image}`
            },
        },
        mounted() {
        }
    })
</script>
</body>
</html>